<!DOCTYPE html>
<html>

<head>
    <title>会员中心</title>
    <% include layout/lib.ejs %>
    <link rel="stylesheet" type="text/css" href="/css/userCenter.css" />
    <script type="text/javascript" src="/lib/js/aliyun-oss-sdk-4.4.4.min.js"></script>
    <script type="text/javascript" src="/lib/js/handlebars.min.js"></script>
</head>

<body>

    <% include layout/header.ejs %>

    <div class="bannerBox">
        <div class="bannerItem" style="background-image:url('/image/ed-24.jpg');"></div>
    </div>

    <div class="userCenterBox">
        <div class="userCenterMain">
            <div class="globalTitleBox">
                <div class="globalTitleIcon">
                    <img src="/image/ed-18.png" />
                </div>
                <div class="globalTitle">会员中心</div>
            </div>
            <div class="userCenterContent">
                <div class="userCenterUserContent">
                    <div class="userCenterInfo">
                        <div class="userCenterInfoItem selected">修改个人资料</div>
                        <div class="userCenterInfoItem">管理我的问题</div>
                    </div>
                    <div class="userCenterQuestionContent">
                        <div class="userCenterQuestionMain"></div>
                        <div class="questionMoreBox"><b>显示更多问题</b><i class="fa fa-ellipsis-h fa-lg"></i></div>
                    </div>
                    <div class="userCenterInfoContent">
                        <div class="infoTitle">用户头像：<font color="red">(可点击更换头像）</font>
                        </div>
                        <div class="infoUpdateHeader">
                            <input type="file" id="uploadAskImage" />
                            <i class="fa fa-plus fa-lg"></i>
                            <img class="headerPreview" src="<%- userData.u_header %>" />
                        </div>
                        <div class="selectSystemHeaderTitle">选择一个系统头像</div>
                        <div class="selectSystemHeader">
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_03.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_05.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_07.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_09.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_15.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_16.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_17.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_18.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_23.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_24.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_25.png" /></div>
                            <div class="selectSystemHeaderItem"><img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/system_header_26.png" /></div>

                        </div>
                        <div class="userCenterInfoContent">
                            <div class="infoTitle">用户昵称：</div>
                            <div class="infoInput"><input id="userNickName" placeholder="请输入要修改的昵称" value="<%- userData.u_nickname %>"
                                    type="text" /></div>
                        </div>
                        <div class="userCenterInfoContent">
                            <div class="infoSubmit">提交修改</div>
                        </div>
                    </div>

                </div>

            </div>

        </div>
    </div>


    <div class="images_prev_box">
        <div class="images_prev_main">
            <div class="images_prev_main_left_btn">
                <span class="fa fa-arrow-circle-left fa-lg"></span>
            </div>
            <div class="images_prev_main_content">
                <div class="images_prev_item_box">

                </div>

                <div class="image_prev_index_box">
                    1 / 10
                </div>

            </div>


            <div class="images_prev_main_right_btn">
                <span class="fa fa-arrow-circle-right fa-lg"></span>
            </div>

        </div>

        <div class="images_prev_close_btn">
            <span class="fa fa-times-circle fa-lg"></span>
        </div>

    </div>

    <% include layout/footer.ejs %>
</body>

<script type="text/template" id="myTemplate">
    {{#each result}} 
    <div class="problemsContentItem">
            <div class="problemsUserInfo">
                <img src="{{u_header}}" />
                {{u_nickname}}
                <div style="float:right;" id="{{q_id}}" class="removeProblemsBox"><i class="fa fa-trash fa-lg" style="font-size:30px;color:#999;margin-top:15px;margin-right:10px;cursor:pointer"></i></div>
            </div>
            <div class="problemsContentTitle"><i class="fa fa-lightbulb-o fa-lg"></i>{{q_title}}<span>提问时间：{{dateFormat q_create_time}}</span></div>
            <div class="problemsContentDesc">{{q_desc}}</div>
            <div class="problemsContentDescImage">

                {{#each images}}
                     <div class="imageItem">
                        <img id="{{this}}" src="{{this}}" />
                    </div> 
                {{/each}}

                 <div style="clear:both;"></div>
            </div>

                    {{#transformatBool q_reply_uid}}
                    <div class="problemsContentVideoTitle"><i class="fa fa-play-circle fa-lg"></i>视频回复：</div>
                    <div class="problemsContentVideo">
                        <video id="my-video" class="video-js vjs-big-play-centered" controls style="width:100%;height:100%;">
                            <source id="video_source" src="https://artmofangtest.oss-cn-beijing.aliyuncs.com/20181220_211607.mp4" type="video/mp4">
                            <p class="vjs-no-js">
                                要查看此视频，请启用JavaScript，并考虑升级到一个网页浏览器
                            <a href="http://videojs.com/html5-video-support/" target="_blank">支持HTML5视频</a>
                            </p>
                        </video>
                    </div>
                       

                            <!-- 判断是否为自己的问题，如果为自己的问题，并且未解决可以标记已解决 -->
                            {{#transformatBool q_status}}
                            
                            <div class="solveStatusBox" style="background-image:url('/image/ed-35.png')";>
                                <div class="solveUserBox">
                                    <img src="https://e-d.oss-cn-beijing.aliyuncs.com/system_header/morentouxiang.png" />
                                </div>
                            </div>
                            {{else}}
                                    <!-- {{#transformatBool isTagSolve}}
                                        <div class="askActionBox">标记为已解决</div>
                                    {{/transformatBool}} -->
                                <div class="askActionBox" id="{{q_id}}"><span class="tagQuestionEnd" id="{{q_id}}">记为已解决</span>标</div>
                                <div class="solveStatusBox" style="background-image:url('/image/ed-34.png')">
                                    <div class="solveUserBox">
                                    </div>
                                </div>
                           {{/transformatBool}} 
                    {{/transformatBool}}   
                
        </div>
        {{/each}}
</script>

<script>
    $(function () {

        //判断是否登录
        if(!USER.isLogin()){
            location.href="/login";
            return;
        }


        var skip = 0;
        var nowIndex = 0;

        var nowHeaderUrl = "<%- userData.u_header %>"; //当前修改的头像URL


        //标记已解决
        $(document).on("click", ".tagQuestionEnd", function () {

            var _id = $(this).attr("id");

            POP.confirm("确定提示", "确定要将该问题标记为已解决吗？", function () {

                var params = {
                    q_id: _id
                }

                POP.startLoading();

                HTTP.post("/user/overUserQuestion", params, (rs) => {

                    POP.endLoading();
                    POP.success("提示信息", "问题已标记为解决");

                    setTimeout(function () {
                        skip = 0;
                        $(".userCenterQuestionMain").html("");
                        getQuestionData();
                    }, 1000);

                })

            });

        });

        $(".questionMoreBox").click(function () {

            var _text = $(".questionMoreBox").text();  
            if(_text == '已没有更多问题'){
                return;
            }      

            skip += skip + 20;

            getQuestionData();

        });

        $(document).on("click", ".removeProblemsBox", function () {

            var _id = $(this).attr("id");

            POP.confirm("删除提示", "确定要删除该问题吗？", function () {

                var params = {
                    q_id: _id
                }

                POP.startLoading();

                HTTP.post("/user/deleteUserQuestion", params, (rs) => {

                    POP.endLoading();
                    POP.success("提示信息", "问题删除成功");

                    setTimeout(function () {
                        skip = 0;
                        $(".userCenterQuestionMain").html("");
                        getQuestionData();
                    }, 1000);

                })

            });




        })

        //切换菜单
        $(".userCenterInfoItem").click(function () {

            var _index = $(".userCenterInfoItem").index(this);

            $(".userCenterInfoItem").removeClass("selected");
            $(".userCenterInfoItem:eq(" + _index + ")").addClass("selected");

            if (_index == 0) {

                nowIndex = 0;

                $(".userCenterQuestionContent").hide();
                $(".userCenterInfoContent").show();

            } else {

                if (nowIndex == _index) {
                    return;
                }

                nowIndex = 1;

                skip = 0;
                $(".userCenterQuestionMain").html("");

                getQuestionData();

            }

        });

        Handlebars.registerHelper("dateFormat", function (value) {
            return dateFormat("yyyy-MM-dd hh:mm", value)
        });

        Handlebars.registerHelper("transformatBool", function (value, options) {
            if (value == 0) {
                return options.inverse(this);
            } else {
                return options.fn(this);
            }
        });

        $(".infoSubmit").click(function () {

            //获取用户信息
            var userHeader = nowHeaderUrl;
            var userNickName = $("#userNickName").val();

            if (str_trim(userNickName).length <= 0) {
                POP.warning("验证提示", "用户昵称不能为空");
                return;
            }

            var params = {
                u_nickname: userNickName,
                u_header: userHeader,
                u_id: USER.getUserId()
            }

            POP.startLoading();

            HTTP.post("/user/updateUserInfo", params, (rs) => {

                POP.endLoading();
                POP.success("提示信息", "恭喜您，用户信息修改成功");

            })

        })

        $(".selectSystemHeaderItem").click(function () {

            var nowSrc = $(this).find("img").attr('src');
            $(".headerPreview").attr("src", nowSrc);
            nowHeaderUrl = nowSrc;
        })



        $("#uploadAskImage").change(function (e) {


            var file = e.target.files[0];
            if (file == undefined) { return }

            //判断文件类型
            var fileExt = file.name.toLowerCase().split('.').splice(-1);
            var isExt = containsArr(['jpg', 'png', 'gif', 'svg', 'jpeg'], fileExt[0]);
            if (!isExt) {
                return cb(false, "抱歉,不支持上传该格式的文件");
            }

            POP.startLoading();

            //获取上传签名
            HTTP.post("/common/getTSTToken", {}, (rs) => {

                var client = new OSS.Wrapper({
                    region: "oss-cn-beijing",
                    accessKeyId: rs.AccessKeyId,
                    accessKeySecret: rs.AccessKeySecret,
                    stsToken: rs.SecurityToken,
                    bucket: "e-d"
                });

                var fileName = Date.parse(new Date());
                var fileExt = file.name.toLowerCase().split('.').splice(-1);
                var randStr = randomString(6);
                var newFilename = fileName + "-" + randStr + "." + fileExt[0];

                client.multipartUpload("question/" + newFilename, file).then(function (result) {

                    POP.endLoading();

                    if (result.url != undefined) {

                        nowHeaderUrl = result.url;

                    } else {

                        var IMAGE_SERVER = "https://e-d.oss-cn-beijing.aliyuncs.com/";
                        nowHeaderUrl = IMAGE_SERVER + result.name;
                    }

                    $(".headerPreview").attr("src", nowHeaderUrl);


                }).catch(function (err) {
                    POP.error("图片上传失败，请重新尝试")
                });

            })

        });

        function getQuestionData() {

            POP.startLoading();

            HTTP.get("/user/searchQuestion/skip/" + skip + "/limit/20/u_id/" + USER.getUserId(), (rs) => {

                POP.endLoading();

                var tpl = $("#myTemplate").html();


                if (rs.length < 20) {
                    $(".questionMoreBox").html("<b>已没有更多问题</b>");
                }


                //处理图片数组
                for (var i = 0; i < rs.length; i++) {

                    if (rs[i].q_images.length <= 0) {
                        rs[i].images = [];
                    } else {
                        rs[i].images = rs[i].q_images.split(",");
                    }

                }

                //预编译模板
                var template = Handlebars.compile(tpl);

                var html = template({ result: rs });

                $(".userCenterQuestionMain").append(html);

                $(".userCenterQuestionContent").show();
                $(".userCenterInfoContent").hide();

            })


        }


        $(document).on("click", ".imageItem", function () {

            _leftV = 0;

            //获取当前图片元素的数组
            var imageParentBox = $(this).parent();
            imageCount = imageParentBox.find(".imageItem").length;


            //获取当前点击的索引
            _imageIdx = imageParentBox.find(".imageItem").index(this);
            $(".image_prev_index_box").text((_imageIdx + 1) + " / " + imageCount);

            //总容器宽度
            $(".images_prev_item_box").width(imageCount * 800);
            $(".images_prev_main").css("marginLeft", "-605px")

            //获取出图片源地址
            var imageUrlArr = [];

            var imagHTML = "";
            imageParentBox.find(".imageItem").each(function () {

                var nowImgUrl = $(this).find("img").attr("id");

                imagHTML += '<div class="images_prev_item"><img src="' + nowImgUrl + '" /></div>';


            });


            //获取当前滚动条的位置
            var nowScrollTop = $(document).scrollTop();

            $(".images_prev_item_box").html(imagHTML);
            $(".images_prev_box").show();
            $(".images_prev_box").css("top", nowScrollTop);

            _leftV -= 800 * _imageIdx;
            $(".images_prev_item_box").css("left", _leftV);

            //禁止滚动
            $('body,html').css({
                overflow: 'hidden',
            });


        });

        $(document).on("click", ".images_prev_main_left_btn span", function () {



            if (_imageIdx - 1 < 0) {
                return false;
            }

            _imageIdx--;


            _leftV += 800;
            $(".image_prev_index_box").text((_imageIdx + 1) + " / " + imageCount);
            $(".images_prev_item_box").css("left", _leftV);

            return false;

        });

        $(document).on("click", ".images_prev_main_right_btn span", function (e) {

            if (_imageIdx + 1 >= imageCount) {
                return false;
            }

            _imageIdx++;


            _leftV -= 800;
            $(".image_prev_index_box").text((_imageIdx + 1) + " / " + imageCount);
            $(".images_prev_item_box").css("left", _leftV);

        });

        $(".images_prev_close_btn").click(function () {
            $(".images_prev_box").fadeOut(300);
            $('body,html').css({
                overflow: 'auto',
            });
        })


    })
</script>

</html>